<script setup>
import UserInfoHeader from '../../components/layout/userInfoHeader.vue';
import _axios from '@/utils/myAxios.js'
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
let userInfo = ref({
    id: undefined,
    nickname: undefined,
    username: undefined,
    sex: undefined,
    avatar: undefined
})
let rule = reactive({ //文章表单规则
    nickname: [
        { required: true, message: '昵称不能为空', trigger: 'blur' },
        { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
    ],
    sex: [
        { required: true, message: '性别不能为空', trigger: 'blur' }
    ]
})

let Ref = ref()
let fileList = ref([])

let dialogVisible = ref(false)
let dialogImageUrl = ref("")

function handlePictureCardPreview() {
    dialogImageUrl.value = fileList.value[0].url
    dialogVisible.value = true
}
async function getUserInfo() {
    const res = await _axios.get("/api/account/getUserInfo")
    if (res.data.code === 200) {
        userInfo.value = res.data.data
        if (fileList.value.length === 0) {
            if (res.data.data.avatar) {
                fileList.value.push({
                    name: "头像", url: res.data.data.avatar
                })
            } else {
                fileList.value.push({
                    name: "头像", url: "/src/assets/avatar/touxiang.jpg"
                })
            }
        }
    } else {
        ElMessage({
            showClose: true,
            message: res.data.message,
            type: 'error',
            appendTo: "#app",
        })
    }
}

let visble = ref(false)

function edit() {
    visble.value = true
}

function cancleEidt() {
    visble.value = false
}

function editUserInfo() {
    Ref.value.validate((valid) => {
        if (valid) {
            ElMessageBox.confirm('确定修改信息吗？', '系统提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                appendTo: "#app",
            }).then(async () => {
                const res = await _axios.put("/api/account/updateAccountOneself", {
                    id: userInfo.value.id,
                    nickname: userInfo.value.nickname,
                    sex: userInfo.value.sex,
                    avatar: userInfo.value.avatar
                })
                return res
            }).then((res) => {
                if (res.data.code === 200) {
                    ElMessage({
                        showClose: true,
                        message: "您的信息已修改成功",
                        type: 'success',
                        appendTo: "#app",
                    })
                    visble.value = false
                    getUserInfo()
                } else {
                    ElMessage({
                        showClose: true,
                        message: res.data.message,
                        type: 'warning',
                        appendTo: "#app",
                    })
                }
            })
        }
    })
}

onMounted(() => {
    getUserInfo()
})

function onExceed() {
    ElMessage({
        showClose: true,
        message: "只能上传一个文件,请先删除左边的图片",
        type: 'warning',
        appendTo: "#app",
    })
}

let uploadLimit = ref(1)
async function uploadFile(img) {
    let res = await _axios.post('/api/upload',
        {
            img: img.file
        },
        {
            headers: { 'Content-Type': 'multipart/form-data' },
        })
    if (res.data.code == 200) {
        userInfo.value.avatar = "http://47.92.174.180:8080"+res.data.data
        ElMessage({
            showClose: true,
            message: "缩略图上传成功",
            type: 'success',
            appendTo: "#app",
        })
    } else {
        ElMessage({
            showClose: true,
            message: res.data.message,
            type: 'error',
            appendTo: "#app",
        })
    }
}

</script>

<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <UserInfoHeader />
            </el-header>
            <el-main>
                <div class="userMain">
                    <div class="userMain-Header"></div>
                    <el-form :model="userInfo" :rules="rule" ref="Ref">
                        <div class="userMain-content">
                            <div class="content">
                                <el-upload v-model:file-list="fileList" list-type="picture-card" :limit=uploadLimit
                                    accept=".jpg,.png" :http-request="uploadFile" :on-exceed="onExceed"
                                    :on-preview="handlePictureCardPreview">
                                    <el-icon>
                                        <Plus />
                                    </el-icon>
                                </el-upload>
                            </div>
                            <div v-if="visble">
                                <el-form-item prop="nickname" label="昵称" style="font-weight: 600;">
                                    <el-input size="large" style="width: 300px;" v-model="userInfo.nickname"
                                        placeholder="请输入用户昵称" />
                                </el-form-item>
                            </div>
                            <div class="content" v-else>
                                <span style="font-size: 30px;font-weight: 600;">昵称</span>
                                <span class="content-item" style="font-size: 30px;">{{
                                    userInfo.nickname }}</span>
                            </div>
                            <div v-if="visble" class="content" style="font-weight: 600;">
                                <el-form-item label="性别" prop="sex">
                                    <el-select v-model="userInfo.sex" placeholder="请选择性别" size="large"
                                        style="width: 240px">
                                        <el-option label="男" value="男" />
                                        <el-option label="女" value="女" />
                                        <el-option label="未知" value="未知" />
                                    </el-select>
                                </el-form-item>
                            </div>
                            <div class="content" v-else>
                                <h3>性别</h3>
                                <h3 class="content-item">{{ userInfo.sex }}</h3>
                            </div>
                            <div class="content">
                                <h3>邮箱</h3>
                                <h3 class="content-item">{{ userInfo.username }}</h3>
                            </div>
                            <div v-if="visble" style="width: 100%;text-align: center;">
                                <el-button type="warning" @click="cancleEidt">取消编辑</el-button>
                                <el-button type="primary" @click="editUserInfo">保存数据</el-button>
                            </div>
                            <div v-else style="width: 100%;text-align: center;">
                                <el-button type="warning" text style="font-size: 18px;" @click="edit">
                                    <el-icon>
                                        <Edit />
                                    </el-icon>
                                    编辑
                                </el-button>
                            </div>
                        </div>
                    </el-form>
                </div>
                <el-dialog v-model="dialogVisible" style="text-align: center;">
                    <img w-full :src="dialogImageUrl" alt="放大预览图片" style="height: 600px;"/>
                </el-dialog>
            </el-main>
        </el-container>
    </div>
</template>

<style scoped>
.el-main {
    background-color: var(--el-bg-color);
}

.userMain {
    margin: auto;
    width: 1000px;
    background-color: var(--el-page-bg-color);
}

.userMain .userMain-Header {
    width: 100%;
    height: 250px;
    background: url("@/assets/image/八戒和紫珠儿2.jpg") no-repeat bottom 42% center;
    background-size: cover;
}

.userMain .userMain-content {
    margin-left: 30px;
    padding-bottom: 20px;
}

.content {
    display: flex;
    width: 100%;
    margin: 30px 0;
    border-bottom: 1px solid var(--el-border-color);
}

.content .content-item {
    margin-left: 100px;
    font-weight: 500;
}
</style>